<template>
   <!--添加练习-->
  <view class="DailyPractice flex flex-column" v-if="postParams.practiceType">
    <StepNav ref="stepNav" :step="step" class="fs_0" :practiceType="postParams.practiceType" @change="stepChange" />
    <view class="f_1 scroll-y main">
      <Step1 v-show="step === 1" @updatePostParams="updatePostParams" ref="Step1"></Step1>
      <Step2 v-show="step === 2" @updatePostParams="updatePostParams" ref="Step2"></Step2>
      <Step3 v-show="step === 3" @updatePostParams="updatePostParams" ref="Step3"></Step3>
    </view>
  </view>
</template>
<script>
import StepNav from "./components/StepNav.vue";
import Step1 from "./components/step1/index.vue";
import Step2 from "./components/step2/index.vue";
import Step3 from "./components/step3/index.vue";
import { publishPractice } from "@/improve/services";
import { titleMap } from '@/improve/components/enum'

export default {
  name: "DailyPractice",
  components: { Step3, Step2, Step1, StepNav },
  provide() {
    return {
      prop_practice: () => null,
      prop_postParams: () => this.postParams,
      pro_practiceType: () => this.postParams.practiceType
    };
  },
  data() {
    return {
      step: 1,
      postParams: {
        "practiceType": null,
      }
    }
  },
  methods: {
    async stepChange(value) {
      if (value === this.step) return;
      if (value === 2 || value === 3) {
        this.$refs[`Step${value - 1}`].submit();
      } else {
        this.step = value;
      }
    },
    updatePostParams(json, step) {
      this.postParams = { ...this.postParams, ...json };
      if (step) {
        this.step = step;
        return
      }
      // 提交
      publishPractice(this.postParams).then(res => {
        uni.navigateTo({
          url: `/improve/publish/historicalCreationDetail?upgPracticeUuid=${res}&practiceType=${this.postParams.practiceType}`
        })
      })
    }
  },
  onLoad(options) {
    this.postParams.practiceType = options.practiceType ?? '1';
    wx.setNavigationBarTitle({
      title: titleMap[this.postParams.practiceType]
    });
  }
}
</script>
<style scoped lang="scss">
.DailyPractice {
  width: 100%;
  height: 100vh;
  background-color: #F5F5F5;

  .main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  ::v-deep.line {
    width: 100%;
    background-color: #F5F5F5;
  }

  ::v-deep .btn-item {
    padding-top: 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
    bottom: 0;
    width: 100%;
    z-index: 99;

    .btn {
      background-color: #37B874;
      border-radius: 24rpx;
      width: calc(100% - 40px);
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      font-size: 32rpx;
      color: #FFFFFF;
      margin-left: 20px;
    }
  }
}

::v-deep .u-popup__content {
  width: 100vw;
  max-height: 85vh;
  overflow-y: scroll;
  flex: inherit !important;
}

::v-deep .select-wr {
  .u-input {
    width: 96px !important;
    height: 40px;
    background-color: #F9F9F9;
    flex: inherit;

    input {
      width: 100%;
      height: 100%;
      line-height: 40px;
      text-align: center !important;
    }
  }
}

::v-deep .u-form {

  /*.u-form-item:nth-child(1),.u-form-item:nth-child(2){*/
  .u-form-item__body__right__message {
    margin-left: 0 !important;
    display: none;
  }

  /* }*/
  .u-form-item__body {
    padding: 18px 15px 18px 26px !important;

    .u-line {
      border-color: #F2F2F2 !important;
    }
  }

  .u-form-item__body__left {
    width: fit-content !important;

    .u-form-item__body__left__content__label {
      font-size: 32rpx !important;
      margin-left: 8rpx;
      color: #333333;
    }
  }

  .u-textarea {
    background-color: #F9F9F9 !important;
    margin-top: 16rpx;

    textarea {
      background-color: #F9F9F9;
      font-size: 32rpx;
      color: #333333;
    }
  }

  .u-input {
    input {
      text-align: right !important;
      font-size: 16px !important;
      padding-right: 36rpx;
    }
  }

  .score {
    .u-input {
      width: 90px !important;
      height: 40px;
      background-color: #F9F9F9;
      flex: inherit;
      margin-right: 48rpx;

      input {
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center !important;
      }
    }

  }

  .uni-select {
    border: none !important;
  }

  .uni-select__input-text {
    text-align: center;
  }

}
</style>